<template>
  <div class="index">
    <div class="box">
      <div class="top" v-if="!$store.state.showSearch">
        <span class="logo ">云游</span>
        <div class="search  ">
          <input @click="$store.state.showSearch=true" type="text" :placeholder="$t('m.searchPlace')" readonly/>
          <img src="../static/img/search.png"/>
        </div>
        <img @click="changeLang" class="langChange" src="../static/img/langChange.png"/>
      </div>
      <div class="banner">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item,index) in imgData01" :key="index"><img :src="item"/> </mt-swipe-item>
        </mt-swipe>
      </div>
      <p class="block_title">{{$t('m.reCity')}}</p>
      <div class="recommend">
        <div class="loading" v-if="imgData01load"><mt-spinner type="double-bounce" color="#FFBF44"></mt-spinner></div>
        <ul>
          <li @click="toDetail(item.id,item)" data-cityId="item.id" v-for="(item,index) in itemData01" :style="{backgroundImage:'url(' + item.cityImages[0].cityImageUrl + ')'}">
            <p v-if="$i18n.locale==='zh_cn'">*{{item.cityName}}</p>
            <p v-else>*{{item.cityName_en}}</p>
          </li>
        </ul>
      </div>
      <p class="block_title">{{$t('m.poDes')}}</p>
      <div class="loading" v-if="imgData02load"><mt-spinner type="double-bounce" color="#FFBF44"></mt-spinner></div>
      <spotList :dataList="itemData02" :showAction="showAction"></spotList>
    </div>
    <transition name="fade">
      <div class="search_box" v-if="$store.state.showSearch">
        <searchBox></searchBox>
      </div>
    </transition>
  </div>
</template>

<script>
  import searchBox from './search.vue';
  import spotList from './comment/spotList/spotList';
  export default {
    name:'index',
    components:{spotList,searchBox},
    data () {
      return {
        imgData01:['http://images.decor01.com/Fqw4Jf4ykMp8myuhbKYGo3GMx8ds','http://images.decor01.com/MJDecor1530774251401112672','http://images.decor01.com/MJDecor1530771684549111707'],
        itemData01:[],
        itemData02:[],
        lang :'zh_cn',
        imgData01load:true,
        imgData02load:true,
        showAction:true,
        hotarea:[],
        hotspot:[]
      }
    },
    methods:{
      //推荐城市详情
      toDetail(i,item){
        if(this.$i18n.locale==='zh_cn'){
          this.$router.push('/detail?id='+i+'&city='+item.cityName+'')
        }else {
          this.$router.push('/detail?id='+i+'&city='+item.cityName_en+'')
        }

      },
      //获取推荐城市
      getHotCity(){
        let that = this;
        this.$axios.get(this.$store.state.apiUrl+'index/getRecommendImage?lang='+this.$i18n.locale)
        .then(function (res) {
          that.imgData01load = false;
          that.itemData01 = res.data;
        })
        .catch(function (error) {
          console.log('获取热门城市失败');
        });
      },
      //获取热门景点
      getHotSpot(){
        let that = this;
        that.$axios.get(this.$store.state.apiUrl+'index/hotSpot',{
          params:{
            userId:sessionStorage.getItem('userId'),
            lang:that.$i18n.locale
          }
        })
          .then(function (res) {
            console.log(res.data)
            that.imgData02load = false;
            that.itemData02 = res.data.data;
          })
          .catch(function (error) {
            console.log('获取热门城市失败');
          });
      },
      //热门景点详情
      toAreaDetail(i){
        this.$router.push('/areaDetail?id='+i+'')
      },
      changeLang(){
        console.log(this.lang)
        if ( this.$i18n.locale === 'zh_cn' ) {
          this.$i18n.locale = 'en_us';
          sessionStorage.setItem('lang','en_us')
//          this.$i18n.locale = this.lang;//关键语句
        }else {
          this.$i18n.locale = 'zh_cn';
          sessionStorage.setItem('lang','zh_cn')
//          this.$i18n.locale = this.lang;//关键语句
        }
        window.location.reload();
      },
      //默认搜索框内容

    },
    mounted(){
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    created(){
      this.$store.state.showTab = true;
      this.getHotCity();
      this.getHotSpot();

    }
  }
</script>

<style scoped>
  .box{padding: 0.44rem 0 0.6rem}
  .top{height: 0.32rem;height: 0.44rem;-webkit-display: flex;display: flex;-webkit-align-items: center;align-items: center;position: fixed;width: 100%;top: 0;left: 0;background: #fff;z-index: 50;}
  .logo{font-size: 0.2rem;color: #333333; font-family: 'jlinxin';line-height: 0.2rem;display: inline-block;margin: 0.06rem 0.12rem;font-weight: bold}
  .search{-webkit-flex: 1;flex: 1;height: 0.32rem;background: #F7F7F7; border: 1px solid #E6E6E6; line-height: 0.32rem;border-radius: 1rem;overflow: hidden;position: relative;}
  .search input{float: left;background: #F7F7F7;width: 100%;height: 100%;box-sizing: border-box;padding-left: 0.35rem;font-size: 0.12rem;color: #333;}
  .search input::placeholder{color: #ccc;}
  .search img{position: absolute;width: 0.15rem;height: 0.15rem;z-index: 2;left: 0.1rem;top: 0.09rem;}
  .langChange{width: 0.2rem;height: 0.2rem;margin: 0.06rem 0.15rem 0;}
  .banner{width: 3.45rem;height: 1.7rem;overflow: hidden;margin: 0.16rem auto 0.1rem}
  .banner img{width: 100%;height: 100%;display: block;}
  .recommend{width: 100%;box-sizing: border-box;padding-left: 0.15rem;}
  .recommend ul{box-sizing: border-box; white-space: nowrap; overflow-x: scroll;width: 100%;height: 0.8rem;overflow-y: hidden;}
  .recommend li{width: 1.3rem;height: 0.8rem;margin-right: 0.1rem;border-radius: 5px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;display: inline-block;vertical-align: top}
  .recommend li p{font-size: 0.14rem;color: #fff;font-family: 'jlinxin';font-weight: bold;position: absolute;z-index: 2;border-bottom: 0.02rem solid #fff;padding:0 0.05rem 0.05rem;right: 0.1rem;bottom: 0.05rem;}
  .search_box{width: 100vw;height: 100vh;position: fixed;z-index: 51;top: 0;background: #fff}
  .recommend::-webkit-scrollbar{height: 0;}
</style>
